<template>
  <el-menu
    :default-active="activeIndex"
    :collapse="isCollapse"
    class="el-menu-demo h-full"
    background-color="#000000"
    text-color="#ffffff"
    router
  >
    <template v-for="menu in menuList" :key="menu.id">
      <!-- 没有子路由的情况 -->
      <el-menu-item v-if="!menu.child" :index="menu.path">
        <span>{{ menu.title }}</span>
      </el-menu-item>

      <!-- 存在子路由的情况 -->
      <el-sub-menu v-else :index="menu.path">
        <template #title>{{ menu.title }}</template>
        <el-menu-item
          v-for="_menu in menu.child"
          :key="_menu.id"
          :index="_menu.path"
          >{{ _menu.title }}</el-menu-item
        >
      </el-sub-menu>
    </template>
  </el-menu>
</template>
<script lang="ts" setup>
import { useUserStore } from '/@/store'
const activeIndex = computed(() => {
  return useRoute().path
})
const menuList = computed(() => {
  return useUserStore().menuList
})

const isCollapse = computed(() => {
  return useUserStore().isCollapse
})
</script>
